import React, { memo } from 'react'
import { withRouter } from 'react-router-dom'
import { useSelector, shallowEqual } from 'react-redux'
import { IntroSongsWrap } from './style'
import { formateCount } from '../../utils/index'
import PlayCount from '../../assets/img/playcount.png'
import Play from '../../assets/img/play.png'

const IntroSongs = memo((props) => {
  const { info } = props
  const { introSongs } = useSelector((state) => ({
    introSongs: state.individuation.introSongs
  }), shallowEqual)

  const gotoDetail = (index) => {
    const id = introSongs[index].id
    const time = introSongs[index].trackNumberUpdateTime
    props.history.push({ pathname: `/musiclistdetail/${id}/${time}` })
  }

  return (
    <IntroSongsWrap>
      <h4 className="intro-title">推荐歌单</h4>
      <div className="songs-list">
        {
          info.map((item, index) => {
            return (
              <div key={item.id} className="songs-item" onClick={() => gotoDetail(index)}>
                <img src={item.picUrl} alt={item.name} />
                <p className="songs-title">{item.name}</p>
                <div className="playlist-count">
                  <img src={PlayCount} alt="" />
                  {formateCount(item.playCount)}
                </div>
                <div className="playlist-desc">
                  <span>{item.copywriter}</span>
                </div>
                <div className="playlist-play">
                  <img src={Play} alt="" />
                </div>
              </div>
            )
          })
        }
      </div>
    </IntroSongsWrap>
  )
})

export default withRouter(IntroSongs)